<template>
  <div class="footer">
    <svg
      width="100%"
      height="900px"
      id="svg"
      viewBox="0 0 1440 600"
      xmlns="http://www.w3.org/2000/svg"
      class="transition duration-300 ease-in-out delay-150"
    >
      <defs>
        <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
          <stop offset="5%" stop-color="#002bdc88"></stop>
          <stop offset="95%" stop-color="#32ded488"></stop>
        </linearGradient>
      </defs>
      <path
        d="M 0,600 C 0,600 0,200 0,200 C 97.33014354066987,215.5598086124402 194.66028708133973,231.11961722488041 282,246 C 369.33971291866027,260.8803827751196 446.688995215311,275.08133971291863 534,252 C 621.311004784689,228.91866028708137 718.5837320574161,168.555023923445 814,143 C 909.4162679425839,117.44497607655501 1002.9760765550241,126.69856459330143 1107,142 C 1211.023923444976,157.30143540669857 1325.511961722488,178.6507177033493 1440,200 C 1440,200 1440,600 1440,600 Z"
        stroke="none"
        stroke-width="0"
        fill="url(#gradient)"
        class="transition-all duration-300 ease-in-out delay-150 path-0"
      ></path>

      <defs>
        <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
          <stop offset="5%" stop-color="#002bdcff"></stop>
          <stop offset="95%" stop-color="#32ded4ff"></stop>
        </linearGradient>
      </defs>
      <path
        d="M 0,600 C 0,600 0,400 0,400 C 107.8755980861244,387.7607655502392 215.7511961722488,375.52153110047846 314,389 C 412.2488038277512,402.47846889952154 500.87081339712927,441.67464114832535 578,438 C 655.1291866028707,434.32535885167465 720.7655502392345,387.7799043062201 817,371 C 913.2344497607655,354.2200956937799 1040.066985645933,367.20574162679424 1149,377 C 1257.933014354067,386.79425837320576 1348.9665071770335,393.3971291866029 1440,400 C 1440,400 1440,600 1440,600 Z"
        stroke="none"
        stroke-width="0"
        fill="url(#gradient)"
        class="transition-all duration-300 ease-in-out delay-150 path-1"
      ></path>
    </svg>
  </div>
</template>

<script>
export default {};
</script>

<style>
.footer {
  height: 400px;
  overflow: hidden;
}
.path-0 {
  animation: pathAnim-0 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes pathAnim-0 {
  0% {
    d: path(
      "M 0,600 C 0,600 0,200 0,200 C 97.33014354066987,215.5598086124402 194.66028708133973,231.11961722488041 282,246 C 369.33971291866027,260.8803827751196 446.688995215311,275.08133971291863 534,252 C 621.311004784689,228.91866028708137 718.5837320574161,168.555023923445 814,143 C 909.4162679425839,117.44497607655501 1002.9760765550241,126.69856459330143 1107,142 C 1211.023923444976,157.30143540669857 1325.511961722488,178.6507177033493 1440,200 C 1440,200 1440,600 1440,600 Z"
    );
  }
  25% {
    d: path(
      "M 0,600 C 0,600 0,200 0,200 C 86.82296650717703,179.74162679425837 173.64593301435406,159.48325358851676 261,152 C 348.35406698564594,144.51674641148324 436.2392344497607,149.80861244019138 545,148 C 653.7607655502393,146.19138755980862 783.3971291866029,137.28229665071768 896,161 C 1008.6028708133971,184.71770334928232 1104.1722488038276,241.06220095693783 1192,253 C 1279.8277511961724,264.93779904306217 1359.9138755980862,232.46889952153109 1440,200 C 1440,200 1440,600 1440,600 Z"
    );
  }
  50% {
    d: path(
      "M 0,600 C 0,600 0,200 0,200 C 83.60765550239233,229.9712918660287 167.21531100478467,259.9425837320574 264,257 C 360.78468899521533,254.05741626794256 470.7464114832536,218.20095693779905 587,197 C 703.2535885167464,175.79904306220095 825.7990430622011,169.25358851674642 905,187 C 984.2009569377989,204.74641148325358 1020.0574162679425,246.78468899521533 1102,253 C 1183.9425837320575,259.21531100478467 1311.9712918660289,229.60765550239233 1440,200 C 1440,200 1440,600 1440,600 Z"
    );
  }
  75% {
    d: path(
      "M 0,600 C 0,600 0,200 0,200 C 71.10047846889952,175.60765550239233 142.20095693779905,151.2153110047847 251,142 C 359.79904306220095,132.7846889952153 506.2966507177034,138.74641148325358 620,138 C 733.7033492822966,137.25358851674642 814.6124401913877,129.79904306220095 906,146 C 997.3875598086123,162.20095693779905 1099.2535885167463,202.05741626794259 1190,215 C 1280.7464114832537,227.94258373205741 1360.3732057416269,213.9712918660287 1440,200 C 1440,200 1440,600 1440,600 Z"
    );
  }
  100% {
    d: path(
      "M 0,600 C 0,600 0,200 0,200 C 97.33014354066987,215.5598086124402 194.66028708133973,231.11961722488041 282,246 C 369.33971291866027,260.8803827751196 446.688995215311,275.08133971291863 534,252 C 621.311004784689,228.91866028708137 718.5837320574161,168.555023923445 814,143 C 909.4162679425839,117.44497607655501 1002.9760765550241,126.69856459330143 1107,142 C 1211.023923444976,157.30143540669857 1325.511961722488,178.6507177033493 1440,200 C 1440,200 1440,600 1440,600 Z"
    );
  }
}
.path-1 {
  animation: pathAnim-1 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes pathAnim-1 {
  0% {
    d: path(
      "M 0,600 C 0,600 0,400 0,400 C 107.8755980861244,387.7607655502392 215.7511961722488,375.52153110047846 314,389 C 412.2488038277512,402.47846889952154 500.87081339712927,441.67464114832535 578,438 C 655.1291866028707,434.32535885167465 720.7655502392345,387.7799043062201 817,371 C 913.2344497607655,354.2200956937799 1040.066985645933,367.20574162679424 1149,377 C 1257.933014354067,386.79425837320576 1348.9665071770335,393.3971291866029 1440,400 C 1440,400 1440,600 1440,600 Z"
    );
  }
  25% {
    d: path(
      "M 0,600 C 0,600 0,400 0,400 C 86.45933014354068,433.2535885167464 172.91866028708137,466.50717703349284 262,448 C 351.08133971291863,429.49282296650716 442.78468899521533,359.2248803827751 549,345 C 655.2153110047847,330.7751196172249 775.9425837320573,372.5933014354068 880,386 C 984.0574162679427,399.4066985645932 1071.4449760765551,384.4019138755981 1162,382 C 1252.5550239234449,379.5980861244019 1346.2775119617224,389.79904306220095 1440,400 C 1440,400 1440,600 1440,600 Z"
    );
  }
  50% {
    d: path(
      "M 0,600 C 0,600 0,400 0,400 C 89.00478468899522,398.6602870813397 178.00956937799043,397.3205741626794 281,415 C 383.99043062200957,432.6794258373206 500.96650717703346,469.3779904306221 598,460 C 695.0334928229665,450.6220095693779 772.1244019138757,395.1674641148325 875,371 C 977.8755980861243,346.8325358851675 1106.5358851674641,353.95215311004785 1205,364 C 1303.4641148325359,374.04784688995215 1371.732057416268,387.02392344497605 1440,400 C 1440,400 1440,600 1440,600 Z"
    );
  }
  75% {
    d: path(
      "M 0,600 C 0,600 0,400 0,400 C 66.89952153110048,432.22966507177034 133.79904306220095,464.4593301435407 241,470 C 348.20095693779905,475.5406698564593 495.7033492822967,454.39234449760767 590,433 C 684.2966507177033,411.60765550239233 725.3875598086123,389.9712918660287 826,372 C 926.6124401913877,354.0287081339713 1086.7464114832537,339.7224880382775 1199,345 C 1311.2535885167463,350.2775119617225 1375.6267942583731,375.1387559808612 1440,400 C 1440,400 1440,600 1440,600 Z"
    );
  }
  100% {
    d: path(
      "M 0,600 C 0,600 0,400 0,400 C 107.8755980861244,387.7607655502392 215.7511961722488,375.52153110047846 314,389 C 412.2488038277512,402.47846889952154 500.87081339712927,441.67464114832535 578,438 C 655.1291866028707,434.32535885167465 720.7655502392345,387.7799043062201 817,371 C 913.2344497607655,354.2200956937799 1040.066985645933,367.20574162679424 1149,377 C 1257.933014354067,386.79425837320576 1348.9665071770335,393.3971291866029 1440,400 C 1440,400 1440,600 1440,600 Z"
    );
  }
}
</style>